<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            user-select: none;
        }

        .wrap {
            width: 600px;
            margin: 50px auto;
        }

        .msgBox {
            margin-top: 50px;
        }

        .msgBox>.title,
        .msgBox .sub {
            display: flex;
            background: #000;
        }

        .msgBox span {
            flex: 1;
            text-align: center;
            line-height: 30px;
            color: #fff;
            border: 1px solid #fff;
        }

        .shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .shadow .addMsg {
            color: #fff;
            padding: 150px;
            background-color: #000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .shadow .addMsg p {
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <p>
            <button id="add">新增</button>
        </p>

        <div class="msgBox">
            <div class="title">
                <span>姓名</span>
                <span>年龄</span>
                <span>删除</span>
                <span>编辑</span>
            </div>
            <div class="content">
                <!-- <div class="sub">
                    <span>111</span>
                    <span>2222</span>
                    <span>删除</span>
                    <span>编辑</span>
                </div> -->
            </div>
        </div>
    </div>
    <div class="shadow">
        <div class="addMsg">
            <p>
                <label for="user">姓名</label>
                <input id="user" type="text">
            </p>
            <p>
                <label for="age">年龄</label>
                <input id="age" type="text">
            </p>
            <p><input type="button" id="send" value="确定">
                <input type="button" id="cancel" value="取消"></p>
        </div>
    </div>
</body>
<script>
    // JS动态生成
    // 先写死(静态页面),在写活(动态页面)

    var addBtn = document.getElementById("add");
    var shadowBox = document.getElementsByClassName("shadow")[0];

    var userInp = document.getElementById("user");
    var ageInp = document.getElementById("age");
    var sendBtn = document.getElementById("send");
    var cancelBtn = document.getElementById("cancel");

    var contentBox = document.getElementsByClassName("content")[0];
    var userList = [];

    // function fn() {
    //     console.log(1111111)
    // }
    // document.onclick = fn;


    addBtn.onclick = function () {
        shadowBox.style.display = "block";
        console.log("sendBtn被重置为新增功能");
        // sendBtn被重置为新增功能
        sendBtn.onclick = addContent;
    }

    /* 
        <div class="sub">
            <span>111</span>
            <span>2222</span>
            <span>删除</span>
            <span>编辑</span>
        </div>

     */

    /* 

        1.点击新增   遮罩层出来
        遮罩层中的“确认” 键的功能 是动态生成数据
        

        2.点击编辑    遮罩层出来
        遮罩层中的“确认” 键的功能 是修改数据
    
     */


    // 确定  (新增功能)

    function addContent() {

        var user = userInp.value;
        var age = ageInp.value;

        if (userList.indexOf(user) == -1) {
            userList.push(user);

            /*
                <div class="sub">
                    <span>111</span>
                    <span>2222</span>
                    <span>删除</span>
                    <span>编辑</span>
                </div>
             */

            // 按照 html 格式 创建dom元素
            var div = document.createElement("div");
            div.className = "sub";

            var userSpan = document.createElement("span"); //创建 span 存储用户名
            userSpan.innerText = user;
            div.appendChild(userSpan);

            var ageSpan = document.createElement("span"); //创建 span 存储年龄
            ageSpan.innerText = age;
            div.appendChild(ageSpan);

            var delSpan = document.createElement("span");  //创建 span 完成删除功能
            delSpan.innerText = "删除";
            div.appendChild(delSpan);

            // 通过dom 生成的元素可以直接绑定事件
            delSpan.onclick = function () { //给每个删除按钮添加事件
                // console.log(this);
                // console.log(delSpan);
                if (confirm("确定要删除我么?")) {
                    this.parentNode.remove();
                    var index = userList.indexOf(user);
                    userList.splice(index, 1);
                }
            }


            var editSpan = document.createElement("span"); //创建 span 完成编辑功能
            editSpan.innerText = "编辑";
            div.appendChild(editSpan);

            editSpan.onclick = function () {   //给每个编辑按钮添加事件

                shadowBox.style.display = "block";
                // 此方法 user,age 值不会变 无法自动更改为新值
                console.log(user, age);
                // userInp.value = user;
                // ageInp.value = age;

                userInp.value = userSpan.innerHTML;
                ageInp.value = ageSpan.innerHTML;
                console.log("sendBtn被重置为编辑功能");

                // sendBtn被重置为编辑功能
                sendBtn.onclick = function () {//重定义确定按钮的事件

                    var newUser = userInp.value;
                    var newAge = ageInp.value;
                    if (userList.indexOf(newUser) == -1) {

                        // 不存在，删除原来的用户名，加入新的用户名
                        // 删除原值
                        var index = userList.indexOf(userSpan.innerText);
                        userList.splice(index, 1);

                        // 加入新值
                        userList.push(newUser);


                        // 把新的值输入到原来的 的元素中    userSpan, ageSpan
                        userSpan.innerText = newUser;
                        ageSpan.innerText = newAge;

                        shadowBox.style.display = "none";
                        userInp.value = "";
                        ageInp.value = "";

                    } else {
                        alert("该用户已存在！");
                    }



                }

            }

            contentBox.appendChild(div);   //把创建的div放到contentBox 中  不放置不会在页面显示

            shadowBox.style.display = "none";
            userInp.value = "";
            ageInp.value = "";

        } else {
            alert("该用户已存在！");
        }

    }

    // 取消按钮
    cancelBtn.onclick = function () {
        shadowBox.style.display = "none";
        userInp.value = "";
        ageInp.value = "";
    }



</script>

</html>